<template>
  <div>
    <el-card>
      <el-row :gutter="20" v-for="(markup, index) of markups" :key="index" class="markupRow">
        <el-col :span="3">
          <el-tag closable @close="handleCloseTag(index)">片段 {{ index + 1 }}</el-tag>
          <el-form>
            <el-form-item>
            </el-form-item>
            <el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="18">
          <el-form :model="markup" :rules="formRules" label-width="120px" :ref="'ruleForm' + index">
            <el-form-item label="tagName" prop="tagName">
              <el-select v-model="markup.tagName" filterable placeholder="请选择">
                <el-option v-for="item in tagNameOptions" 
                :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="selector" prop="selector">
              <el-input v-model="markup.selector"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3">
          <el-form>
            <el-form-item>
              <el-button icon="el-icon-plus" type="primary" circle @click="handleAddTag"></el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-s-tools" type="warning" circle @click="handleConfigAttr(index)"></el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <attrs-config-dialog ref="attrsConfigDialog" @submit='handleConfigSubmit'></attrs-config-dialog>
  </div>
</template>

<script>
var _ = require('lodash')
import ConfigUtil from '@/utils/graph-utils/configUtil'
import AttrsConfigDialog from '@/views/drawTool/dialog/attrs-config-dialog.vue'

export default {
  name: 'MarkupPanel',
  components: { AttrsConfigDialog },
  data() {
    var validateSelector = (rule, value, callback) => {
      const pattern = /^[a-zA-Z][a-zA-Z_0-9$]*$/
      if (!pattern.test(value)) {
        return callback(new Error('请输入以字母开头，不包含汉字的字符串'))
      }
      callback()
    }

    return {
      markups: [{
        tagName: '',
        selector: '',
        attrs: {}
      }],
      formRules: {
        tagName: [
          { required: true, message: '请选择片段类型', trigger: 'change' }
        ],
        selector: [
          { required: true, validator: validateSelector, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    tagNameOptions() {
      return ConfigUtil.getNodeTagConfig()
    }
  },
  methods: {
    handleAddTag() {
      this.markups.push({
        tagName: '',
        selector: '',
        attrs: {}
      })
    },

    handleCloseTag(index) {
      const self = this
      self.markups.splice(index, 1)
      self.$emit('deleteMarkup', index)
      if (self.markups.length === 0) {
        self.markups.push({
          tagName: '',
          selector: '',
          attrs: {}
        })
      }
    },

    handleConfigAttr(index) {
      const self = this
      const formRef = 'ruleForm' + index
      self.$refs[formRef][0].validate((valid) => {
        if (valid) {
          const markup = self.markups[index]
          self.$refs.attrsConfigDialog.showDialog(index, markup.tagName, markup.attrs)
        }
      })
    },

    setMarkupInfo(markups, attrs) {
      this.markups = []
      this.markups = _.cloneDeep(markups)
      for (let index = 0; index < this.markups.length; index++) {
        if (_.has(attrs, this.markups[index].selector)) {
          this.markups[index].attrs = _.cloneDeep(attrs[this.markups[index].selector])
        } else {
          this.markups[index].attrs = {}
        }
      }
      if (this.markups.length === 0) {
        this.markups.push({
          tagName: '',
          selector: '',
          attrs: {}
        })
      }
    },

    getMarkupInfo() {
      const markup = []
      const attrs = {}
      for (const item of this.markups) {
        const cloneItem = _.cloneDeep(item)
        _.set(attrs, cloneItem.selector, cloneItem.attrs)
        _.unset(cloneItem, 'attrs')
        markup.push(cloneItem)
      }
      return {
        markup: markup,
        attrs: attrs
      }
    },

    handleConfigSubmit(index, attrConfigs) {
      if (index === '' || index < 0 || index >= this.markups.length) {
        return
      }
      _.set(this.markups[index], 'attrs', attrConfigs)
    }
  }
}
</script>

<style scoped>
.markupRow {
  border: 1px solid #b7b7b7; 
  padding: 5px;
  margin-bottom: 2px;
}
</style>